<template>
	<view class="content">
		<view class="info">
			<view class="item">
				<text class="title">收货人</text>
				<input type="text" v-model="name" placeholder="请输入收货人姓名" class="input">
			</view>
			<view class="item">
				<text class="title">手机号</text>
				<input type="text" v-model="tel" placeholder="请输入收货人手机号" class="input" maxlength="11">
			</view>
			<view class="item">
				<text class="title">所在地区</text>
				<picker mode='region' @change="chooseregion">
					<input type="text" placeholder="请选择" class="input" v-model="region">
				</picker>
			</view>
			<view class="item">
				<text class="title">详细地址</text>
				<input type="text" v-model="address" placeholder="请输入详细收货地址" class="input">
			</view>
			<view class="item" style="justify-content:left">
				<image :src="baseUrl+'img/my/selected.png'" class="selectedIcon"></image>
				<text class="selectedText">默认地址</text>
			</view>
		</view>
		<view class="addBtn" @click="add">
			{{addText}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				name: '',
				tel: '',
				region: '',
				address: '',
				radioIndex: 0,
				item: '',
				id: '',
				is_def_address: '',
				addText: '保存',
				addressid: ''
			}
		},
		onShow(options) { //获取商品详情
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.id = currentPage.options.id;
			this.addressid = currentPage.options.addressid;
			if (this.id == 1) { //从修改页面来
				this.item = JSON.parse(currentPage.options.item);
				this.name = this.item.user_name;
				this.tel = this.item.phone;
				this.region = this.item.region;
				this.address = this.item.address;
				this.is_def_address = this.item.is_def_address;
				this.addText = '修改';
			}

		},
		methods: {
			add() {
				if (this.name == '') {
					this.$toast('请填写收货人姓名')
					return;
				}
				if (this.tel == '') {
					this.$toast('请填写收货人手机号')
					return;
				}
				if (this.region == '') {
					this.$toast('请选择所在地区')
					return;
				}
				if (this.address == '') {
					this.$toast('请输入详细收货地址')
					return;
				}
				if (this.id == 1) {
					this.$request.post(`userAddressUpdate`, {
						user_id: uni.getStorageSync('user_id'),
						id: this.addressid,
						user_name: this.name,
						phone: this.tel,
						address: this.address,
						is_def_address: this.is_def_address,
						region: this.region
					}).then(res => {
						if (res.data.data == 1) {
							this.$toast('修改成功');
						} else {
							this.$toast('修改失败');
						}
					})
					return;
				}
				this.$request.post(`userAddressSave`, {
					user_id: uni.getStorageSync('user_id'),
					user_name: this.name,
					phone: this.tel,
					address: this.address,
					is_def_address: parseInt(this.radioIndex),
					region: this.region
				}).then(res => {
					if (res.data.data == 1) {
						this.$toast('添加成功');
						setTimeout(function() {
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						}, 2000)
					} else {
						this.$toast('添加失败');
					}
				})
			},
			radioChange(e) {
				console.log(e.detail.value)
				this.radioIndex = e.detail.value;
				this.is_def_address = this.radioIndex;
			},
			chooseregion(e) {
				this.region = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
				console.log(e.detail.value)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F0F0F0;
		overflow: hidden;

		.info {
			width: 100%;
			height: 600rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.item {
				width: 670rpx;
				margin-left: 40rpx;
				height: 120rpx;
				display: flex;
				border-bottom: 1rpx solid #121212;
				align-items: center;
				justify-content: space-between;
				.selectedIcon{
					width: 28rpx;
					height: 28rpx;
				}
				.selectedText{
					font-weight: 500;
					font-size: 22rpx;
					color: #8E8E8E;
					margin-left: 25rpx;
				}
				.title {
					font-weight: 700;
					font-size: 28rpx;
					text-align: left;
					color: #121212;
				}

				.input {
					width: auto;
					font-size: 28rpx;
					text-align: right;
				}
			}
			.item:last-child{
				border: none;
			}
		}

		.addBtn {
			width: 670rpx;
			height: 100rpx;
			margin-top: 120rpx;
			margin-left: 40rpx;
			background: #121212;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			letter-spacing: 6rpx;
		}
	}
</style>